<template>
  <div class="home">
    <!-- 顶部 -->
    <van-nav-bar fixed>
      <template slot="left">
        <router-link class="dizhi" tag="div" to="/map">{{ ditu }}</router-link>
      </template>
      <template slot="title">
        <van-field
          clearable
          left-icon="search"
          @click="sousuo"
          placeholder="请输入搜索"
        /> </template
      >s
    </van-nav-bar>
    <div id="container"></div>
    <!-- 顶部 -->
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
      <van-swipe-item v-for="item in list.banner" :key="item.id">
        <img :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播 -->
    <!-- 图片导航 -->
    <van-grid :column-num="5">
      <van-grid-item
        :to="`/fenzi?id=${item.id}`"
        v-for="item in list.channel"
        :key="item.id"
      >
        <img slot="icon" :src="item.icon_url" alt="" />
        <div slot="text">
          {{ item.name }}
        </div>
      </van-grid-item>
    </van-grid>
    <!-- 图片导航 -->
    <!-- 品牌制造商直供 -->
    <div class="barand">
      <div class="baran-head" @click="$router.push('/ppxq')">
        品牌制造商直供
      </div>
      <div class="content">
        <ul>
          <li
            @click="$router.push(`/pinpai?id=${item.id}`)"
            v-for="item in list.brandList"
            :key="item.id"
          >
            <div class="shangjia">
              <p>{{ item.name }}</p>
              <p class="pic">{{ item.floor_price }}元起</p>
            </div>
            <img :src="item.new_pic_url" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 品牌制造商直供 -->
    <!-- 新品首发 -->
    <div class="newGoods">
      <div class="newHead">
        <div class="top">
          <div>
            <div class="next-shang">新品首发</div>
            <div class="next-xia" @click="show">查看全部</div>
          </div>
        </div>
      </div>
      <div class="newcontend">
        <ul class="list">
          <li
            @click="$router.push(`/goumai?id=${item.id}`)"
            v-for="item in list.newGoods"
            :key="item.id"
          >
            <div class="list-img">
              <img :src="item.list_pic_url" alt="" />
            </div>
            <div class="list-biao">{{ item.name }}</div>
            <div class="list-jian">{{ item.goods_brief }}</div>
            <div class="list-pic">￥{{ item.retail_price }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 新品首发 -->
    <!-- 人气推荐 -->
    <div class="hotGoods">
      <div class="hotHead">
        <div class="top">
          <div>
            <div class="next-shang">人气推荐，好物精选</div>
            <div class="next-xia" @click="showOne">查看全部</div>
          </div>
        </div>
      </div>
      <div class="newcontend">
        <ul class="list">
          <li
            @click="$router.push(`/goumai?id=${item.id}`)"
            v-for="item in list.hotGoods"
            :key="item.id"
          >
            <div class="list-img">
              <img :src="item.list_pic_url" alt="" />
            </div>
            <div class="list-biao">{{ item.name }}</div>
            <div class="list-jian">{{ item.goods_brief }}</div>
            <div class="list-pic">￥{{ item.retail_price }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <!-- 专题精选 -->
    <div class="topicList">
      <div class="topic-top">
        专题精选
        <span class="icon"></span>
      </div>
      <div class="topic-body">
        <ul class="list">
          <li
            @click="$router.push(`/zxq?id=${item.id}`)"
            v-for="item in list.topicList"
            :key="item.id"
          >
            <div class="list-img">
              <img :src="item.item_pic_url" alt="" />
            </div>
            <div class="list-title">
              <p class="list-next">{{ item.title }}</p>
              <p class="list-jian">{{ item.subtitle }}</p>
            </div>
            <div class="list-pic">{{ item.price_info }}元起</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 专题精选 -->
    <!-- 居家好物 -->
    <div class="newcategory">
      <div
        class="newcategoryItem"
        v-for="item in list.newCategoryList"
        :key="item.id"
      >
        <div class="title">{{ item.name }}好物</div>
        <ul>
          <li
            @click="$router.push(`/goumai?id=${it.id}`)"
            v-for="it in item.goodsList"
            :key="it.id"
          >
            <img :src="it.list_pic_url" alt="" />
            <p class="tit">{{ it.name }}</p>
            <p class="pic">￥{{ it.retail_price }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 居家好物 -->
  </div>
</template>

<script>
import { getHomeListApi } from "@/api/首页/home.js";
export default {
  name: "Home",
  data() {
    return {
      list: [],
      ditu: "",
    };
  },
  mounted() {
    if (this.$store.state.upaaintex.name) {
      this.ditu = this.$store.state.upaaintex.name;
    } else {
      var that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            // console.log(result);
            that.ditu = result.city;
          }
        });
      });
    }
  },
  methods: {
    // 调用接口
    async initList() {
      const { data: res } = await getHomeListApi();
      console.log(res);
      this.list = res;
    },
    // 点击跳转搜索页面
    // 跳转搜索页面
    sousuo() {
      this.$router.push("/sousuo");
    },
    // 点击跳转详情页面（新品首发与人气推荐）
    show() {
      this.$router.push(`/xiangqing?id=${1}`);
    },
    showOne() {
      this.$router.push(`/xiangqing?id=${2}`);
    },
  },
  created() {
    this.initList();
  },
};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}
// 顶部导航栏那个地图
.dizhi {
  width: 80px;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 轮播
.my-swipe .van-swipe-item {
  margin-top: 45px;
  color: #fff;
  font-size: 20px;
  height: 200px;
  line-height: 150px;
  text-align: center;
  background-color: #fafafa;

  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .van-swipe__indicator {
  background-color: rgb(250, 0, 0);
}
//品牌制造商直供
.barand {
  margin-top: 5px;
  // 标题
  .baran-head {
    height: 60px;
    font-size: 12px;
    text-align: center;
    line-height: 60px;
    background-color: rgb(255, 255, 255);
  }
  // 图片
  .content {
    // height: 270px;
    background-color: #e9ebeb;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        position: relative;
        height: 130px;
        width: 48%;
        margin-bottom: 5px;
        border: 0.1px solid #e9ebeb;
        .shangjia {
          position: absolute;
          top: 0;
          left: 0;
          height: 12px;
          color: black;
          font-weight: 400;
          .pic {
            font-size: 16px;
            font-weight: 400;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
// 新品首发
.newGoods {
  width: 100%;
  height: 428px;
  margin-top: 11px;
  background-color: rgb(255, 255, 255);
  .newHead {
    height: 143px;
    background-color: #d8f2ff;
    display: flex;
    justify-content: center;
    .top {
      text-align: center;
      width: 87px;
      color: #8c9bae;
      font-size: 0.42667rem;
      .next-shang {
        margin-top: 45px;
      }
      .next-xia {
        width: 100%;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 0.29333rem;
        margin-top: 10px;
        background-color: #9fc7ef;
      }
    }
  }
  .newcontend {
    margin-top: 0.26667rem;
    background: #fff;
    padding-bottom: 0.13333rem;
    overflow: scroll;

    .list {
      // overflow: scroll;
      width: 700px;
      height: 268px;
      background-color: rgb(252, 252, 252);
      overflow: hidden;
      li {
        width: 155px;
        height: 230px;
        float: left;
        margin-left: 10px;
        .list-img {
          width: 154.5px;
          height: 154.5px;
          background-color: #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list-biao {
          width: 80%;
          font-size: 0.4rem;
          font-weight: 700;
          margin: 5px 0 16px;
          color: black;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .list-jian {
          width: 70%;
          margin: 5px 0 13px;
          color: #8a8a8a;
          font-size: 0.35rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list-pic {
          color: #9c3232;
          font-size: 0.32rem;
        }
      }
    }
  }
}
// 人气推荐
.hotGoods {
  width: 100%;
  height: 428px;
  margin-top: 11px;
  border-bottom: 0.01px;
  background-color: rgb(255, 255, 255);
  .hotHead {
    height: 143px;
    background-color: #ede7c8;
    display: flex;
    justify-content: center;
    .top {
      text-align: center;
      width: 153px;
      color: #ddbc51;
      font-size: 0.42667rem;
      .next-shang {
        margin-top: 45px;
      }
      .next-xia {
        width: 60%;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 0.29333rem;
        margin-left: 20%;
        color: #eccf2b;
        margin-top: 10px;
        background-color: #eedaa2;
      }
    }
  }
  .newcontend {
    margin-top: 0.26667rem;
    background: #fff;
    padding-bottom: 0.13333rem;
    overflow: scroll;

    .list {
      // overflow: scroll;
      width: 700px;
      height: 268px;
      background-color: rgb(252, 252, 252);
      overflow: hidden;
      li {
        width: 155px;
        height: 230px;
        float: left;
        margin-left: 10px;
        .list-img {
          width: 154.5px;
          height: 154.5px;
          background-color: #fff;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list-biao {
          width: 80%;
          font-size: 0.4rem;
          font-weight: 700;
          margin: 5px 0 16px;
          color: black;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .list-jian {
          width: 70%;
          margin: 5px 0 13px;
          color: #8a8a8a;
          font-size: 0.35rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list-pic {
          color: #9c3232;
          font-size: 0.32rem;
        }
      }
    }
  }
}
// 专题精选·
.topicList {
  height: 335px;
  margin-top: 5px;
  background-color: rgb(245, 245, 245);
  .topic-top {
    height: 58px;
    padding: 15px 20px;
    box-sizing: border-box;
    text-align: center;
    padding: 0.48rem;
    vertical-align: middle;
    font-size: 12px;
    background-color: #fff;
  }
  .topic-body {
    height: 276.5px;
    overflow: scroll;
    background-color: rgb(255, 245, 245);
    .list {
      width: 1000px;
      height: 100%;
      li {
        width: 318px;
        height: 100%;
        float: left;
        margin-left: 10px;
        .list-img {
          width: 100%;
          height: 179px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list-title {
          margin-top: 0.10667rem;
          float: left;
          width: 265px !important;
          .list-next {
            font-size: 0.4rem;
            font-weight: 700;
          }
          .list-jian {
            width: 90%;
            color: #8a8a8a;
            font-size: 0.32rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowr;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .list-pic {
          float: right;
          margin-top: 0.10667rem;
          color: #9c3232;
          font-size: 0.32rem;
        }
      }
    }
  }
}
// 居家好物
.newcategory {
  background-color: #c0b9b9;
  .newcategoryItem {
    .title {
      height: 44px;
      padding-top: 15px;
      text-align: center;
      box-sizing: border-box;
      font-size: 12px;
      background-color: #e9e9e9;
    }
    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 49%;
        height: 230px;
        margin-bottom: 3px;
        background-color: #faffff;
        overflow: hidden;
        img {
          width: 167px;
          height: 167px;
          margin: 0 auto;
        }
        .tit {
          width: 60%;
          margin: 14px 0 2px;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .pic {
          margin: 14px 0 2px;
          font-size: 12px;
          color: red;
        }
      }
    }
  }
}
</style>